<template>
  <el-card class="web-tool-editor">
    <div
      slot="header"
      class="clearfix">
      <span>编辑器</span>
    </div>
    <div class="content-btns">
      <el-button
        size="mini"
        type="primary"
        @click="show(0, markdownIsShwo)">自定义Markdown</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="show(1, simplemdeMarkdownIsShow)">Simplemde Markdown</el-button>
    </div>
    <div
      v-show="markdownIsShwo"
      class="markdown-editer-box">
      <w-markdown :savebtn="false"/>
    </div>
    <div
      v-show="simplemdeMarkdownIsShow"
      class="markdown-editer-box">
      <w-simplemde-markdown/>
    </div>
  </el-card>
</template>

<script>
import WMarkdown from '@/components/pc/marked/editor'
import WSimplemdeMarkdown from '@/components/global/simplemdeMarkdown/index'
export default {
  name: 'WebToolEditor',
  components: {
    WMarkdown,
    WSimplemdeMarkdown
  },
  data() {
    return {
      // 是否显示markdown编辑器
      markdownIsShwo: false,
      // Simplemde Markdown是否显示
      simplemdeMarkdownIsShow: false
    }
  },
  methods: {
    // 显示指定的markdown
    show(type, state) {
      this.hidAll()
      switch (type) {
        case 0:
          this.markdownIsShwo = !state
          break
        case 1:
          this.simplemdeMarkdownIsShow = !state
          break
      }
    },
    // 是隐藏所有
    hidAll() {
      this.markdownIsShwo = false
      this.simplemdeMarkdownIsShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .web-tool-editor {
    .markdown-editer-box {
      padding-top: 20px;
    }
  }
</style>
